<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>银行卡管理</title>
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/bootstrap/4.6.2/css/bootstrap.min.css">
</head>
<body>
<div class="container mt-5">
    <h2 class="mb-4 text-center">银行卡信息管理</h2>

    <div class="row mb-3">
        <div class="col-md-8">
            <form class="form-inline" method="get" th:action="@{/admin/card/list}">
                <input type="text" class="form-control mr-2" name="cardId" placeholder="卡号" th:value="${cardId}">
                <input type="text" class="form-control mr-2" name="customerName" placeholder="客户姓名" th:value="${customerName}">
                <button type="submit" class="btn btn-primary">查询</button>
            </form>
        </div>
        <div class="col-md-4 text-right">
            <a th:href="@{/admin/card/add}" class="btn btn-success">新增银行卡</a >
            <a th:href="@{/admin/card/export}" class="btn btn-outline-info">导出CSV</a >
        </div>
    </div>

    <table class="table table-bordered table-striped table-hover">
        <thead class="thead-dark">
        <tr>
            <th>卡号</th>
            <th>开户日期</th>
            <th>开户金额</th>
            <th>余额</th>
            <th>是否挂失</th>
            <th>客户编号</th>
            <th>客户姓名</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr th:each="card : ${cardList}">
            <td th:text="${card.cardId}">622200******8888</td>
            <td th:text="${card.openDate}">2025-06-21</td>
            <td th:text="${card.openMoney}">5000</td>
            <td th:text="${card.balance}">8000</td>
            <td>
                <span th:text="${card.isReportLoss == 1 ? '是' : '否'}" th:classappend="${card.isReportLoss} ? 'text-danger' : 'text-success'"></span>
            </td>
            <td th:text="${card.customerId}">1001</td>
            <td th:text="${card.customerName}">好好</td>
            <td>
                <a th:href="@{'/admin/card/edit/' + ${card.cardId}}" class="btn btn-sm btn-primary">编辑</a >
                <a th:href="@{'/admin/card/delete/' + ${card.cardId}}" class="btn btn-sm btn-danger"
                   onclick="return confirm('确定删除该银行卡吗？');">删除</a >
            </td>
        </tr>
        <tr th:if="${#lists.isEmpty(cardList)}">
            <td colspan="7" class="text-center text-muted">暂无银行卡记录</td>
        </tr>
        </tbody>
    </table>
    <div class="text-center mt-4 mb-4">
        <a th:href="@{/admin/index}" class="btn btn-primary">返回首页</a >
    </div>
</div>

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/bootstrap/4.6.2/js/bootstrap.bundle.min.js"></script>
</body>
</html>